// @ts-ignore
import styled from "styled-components";

type propsType = {
  $coverUrl?: string,
  $size?: number,
  $isShowCover?: boolean,
  $isAmplify?: boolean
};
const SongSheetItemStyle = styled.div<propsType>`
  position: relative;
  margin: ${(props: propsType) => props.$size ? `calc(${props.$size}px / 11.2)` : "20px"} ${(props: propsType) => props.$size ? `calc(${props.$size}px / 7.4)` : "30px"};;
  width: min-content;
  height: min-content;
  .song-sheet-cover {
    position: relative;
    width: ${(props: propsType) => props.$size ? props.$size + "px" : 100 + "%"};
    height: ${(props: propsType) => props.$size ? props.$size + "px" : 223 + "px"};
    background-image: url("${(props: propsType) => props.$coverUrl}");
    background-size: 100% 100%;
    background-position: center;
    transition: all 500ms;
  }

  //默认为27px
  ${(props: propsType) =>
          props.$isShowCover ?
        `.song-sheet-cover::after{
            content: "";
            z-index: -1;
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url(${require("../../../assets/image/qqmusic_mask.png")});
            background-size: 100% 100%;
            left: ${props.$size ? `calc(${props.$size}px / 8.5)` : `26px`};
        }` : ""
  }
  ${(props: propsType) =>
          props.$isAmplify ?
                  `.song-sheet-cover:hover{
                background-size: 110% 110%;
                }` : ``
  }
  .song-sheet-cover:hover .song-sheet-mask {
    display: block;
  }

  .song-sheet-mask {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
  }

  .song-sheet-mask:hover .music-play-btn {
    position: absolute;
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
    width: fit-content;
    height: fit-content;
  }

  .music-play-btn {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    font-size: ${(props:propsType)=>props.$size?`calc(${props.$size}px / 5)`:"18px"};;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 500ms;
  }

  .music-play-btn:hover {
    color: var(--theme-color);
  }

  .song-sheet-name {
    width: ${(props: propsType) => props.$size ? props.$size : 224}px;
    margin: calc(${(props: propsType) => props.$size ? props.$size : 224}px / 20) 0;
    font-size: calc(${(props: propsType) => props.$size ? props.$size : 224}px / 14);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .song-sheet-palyednumber, .song-sheet-sing, .song-sheet-releasetime {
    height: 22px;
    color: #999;
    font-size: calc(${(props: propsType) => props.$size ? props.$size : 224}px / 15);
    font-weight: 100;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
`;
export default SongSheetItemStyle;
